<template>
   <div class="list">
       <ul>
           <li v-for="item in accountList" :key="item.title">
               <!-- 左侧区域 -->
               <div class="list-left">
                   <i v-bind:class="item.icon"></i>
                   {{item.title}}
               </div>
               <!-- 右侧区域 -->
               <div class="list-right">
                   {{item.text}}
                   <i class="iconfont iconiconset0420"></i>
               </div>
           </li>
       </ul>
       <div class="logout" @click="logout">
           退出登录
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               accountList:[
                   {title:'青春--666',pagePath:'/',icon:'iconfont iconxiaoren',text:'修改'},
                   {title:'设置登录密码',pagePath:'/',icon:'iconfont iconmima1',text:''},
                   {title:'已绑定手机号157****7042',pagePath:'/',icon:'iconfont iconshouji',text:'更换'},
                   {title:'收获地址管理',pagePath:'/',icon:'iconfont iconhuoche2',text:''},
               ]
           }
       },
       methods: {
           logout(){
               var res = confirm('确定退出？')
               /** 若点击确定则res为true，否则为false */
               if(res){
                   this.$router.push('/login')
               }
           }
       }
   }
</script>
   
<style scoped lang="less">
   .list{
       ul{
           background: white;
           li{
               height: 1.333333rem;
               line-height: 100px;
               display: flex;/**弹性布局 */
               border-bottom: 1px solid #dcdcdc;
               font-size: .373333rem;
                /**左侧区域 */
                .list-left{
                    flex: 1;/**弹性布局---占据剩余空间，达到灵活布局的目的 */
                    margin-left: .266667rem;
                    color: #666;
                    i{
                        font-size: .586667rem;
                        vertical-align: bottom;/**标记项--垂直方向对齐方式 */
                    }
                }
                /*右侧区域*/
                .list-right{
                    margin-right: .266667rem;
                    color: #999;
                    i{font-size: .4rem;}
                }
           }
       }
       .logout{
           margin: .373333rem .266667rem;
            height: 1.333333rem;
            font-size: .373333rem;
            background: #F97150;
            border-radius: .266667rem;
            color: white;
            text-align: center;
            line-height: 100px;
       }
   }
</style>